<template>
  <div class="canvas-container">
    <!-- 工具选择区 -->
    <div class="tools-container">
      <button @click="setTool('pen')">画笔</button>
      <button @click="setTool('line')">线段</button>button>
      <button @click="setTool('rectangle')">矩形</button>
      <button @click="setTool('circle')">圆形</button>
      <button @click="setTool('triangle')">三角形</button>
      <button @click="setTool('eraser')">橡皮</button>
    </div>
    <!-- 画板视图 -->
    <canvas
      class="drawing-viewer"
      ref="canvas"
      @mousedown="startDrawing"
      @mousemove="draw"
      @mouseup="finishDrawing"
    ></canvas>
  </div>
</template>

<script lang="ts" setup>
/*基于 Vue3 setup语法、typescript、scss封装一个 canvas 画板，画板左侧是工具选择区。
  其中该画板提供画笔工具用于手绘，提供线段工具用于绘制线段，体哦那个矩形工具用于绘制矩形，
    圆形工具用于绘制圆形，三角形工具用于绘制三角形，橡皮工具用于擦除。单次绘制的内容是为一个整体，点击可以选中，
    对这个整体进行过放大、缩小、删除，更改颜色。*/
import { onMounted, ref, getCurrentInstance } from 'vue'
import type { ComponentInternalInstance } from 'vue'
const that = getCurrentInstance() as ComponentInternalInstance
const canvasRef = ref<HTMLCanvasElement | null>(null)
const contextRef = ref<CanvasRenderingContext2D | null>(null)
const currentTool = ref<string>('pen')
const isDrawing = ref<boolean>(false)
const startX = ref<number>(0)
const startY = ref<number>(0)

const setTool = (tool: string) => {
  currentTool.value = tool
}

/**
 * 鼠标按下时开始绘制
 * @param event
 */
const startDrawing = (event: MouseEvent) => {
  isDrawing.value = true
  startX.value = event.offsetX
  startY.value = event.offsetY
}

const draw = (event: MouseEvent) => {
  if (!isDrawing.value) return
  const canvas = canvasRef.value
  const context = contextRef.value
  if (!canvas || !context) return
  context.strokeStyle = 'black'
  context.lineWidth = 2
  context.beginPath()
  if (currentTool.value === 'pen') {
    context.moveTo(startX.value, startY.value)
    context.lineTo(event.offsetX, event.offsetY)
  } else if (currentTool.value === 'line') {
    context.moveTo(startX.value, startY.value)
    context.lineTo(event.offsetX, event.offsetY)
  } else if (currentTool.value === 'rectangle') {
    context.rect(
      startX.value,
      startY.value,
      event.offsetX - startX.value,
      event.offsetY - startY.value
    )
  } else if (currentTool.value === 'circle') {
    const radius = Math.sqrt(
      Math.pow(event.offsetX - startX.value, 2) + Math.pow(event.offsetY - startY.value, 2)
    )
    context.arc(startX.value, startY.value, radius, 0, 2 * Math.PI)
  } else if (currentTool.value === 'triangle') {
    context.moveTo(startX.value, startY.value)
    context.lineTo(event.offsetX, event.offsetY)
    context.lineTo(startX.value + (event.offsetX - startX.value) / 2, event.offsetY)
    context.closePath()
  } else if (currentTool.value === 'eraser') {
    context.clearRect(event.offsetX - 10, event.offsetY - 10, 20, 20)
  }
  context.stroke()
}

/**
 * 鼠标松开时完成绘制
 */
const finishDrawing = () => {
  isDrawing.value = false
}

onMounted(() => {
  const canvas = that.refs.canvasRef as HTMLCanvasElement
  if (!canvas) return
  canvas.width = window.innerWidth
  canvas.height = window.innerHeight
  const context = canvas.getContext('2d')
  if (!context) return
  contextRef.value = context
})
</script>

<style lang="scss">
.canvas-container {
  display: flex;
  height: 100vh;
  .tools-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100px;
    background-color: #f0f0f0;
  }
  canvas.drawing-viewer {
    flex: 1;
    width: 100%;
    background-color: rgb(255, 255, 255);
  }
}
</style>
